<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>轮滑过桩比赛系统 - iPad适配</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2878267_rd7xl5u0kck.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    body {
      background-color: #f0f4f8;
      color: #303133;
      padding: 20px;
      overflow-x: hidden;
    }
    
    .page-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 60px;
      padding-bottom: 60px;
    }
    
    .page-section {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .page-title {
      font-size: 32px;
      font-weight: 700;
      color: #2c3e50;
      padding-bottom: 15px;
      border-bottom: 3px solid #409EFF;
      position: relative;
    }
    
    .page-title::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 80px;
      height: 3px;
      background-color: #67c23a;
    }
    
    .page-subtitle {
      font-size: 16px;
      color: #606266;
      margin-top: -15px;
      margin-bottom: 20px;
    }
    
    .ipad-frame {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 75%; /* 4:3比例 */
      background: #111;
      border-radius: 30px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
      overflow: hidden;
    }
    
    .ipad-inner {
      position: absolute;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      border-radius: 26px;
      overflow: hidden;
      background: #000;
    }
    
    .ipad-screen {
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
    }
    
    .ipad-camera {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #333;
      z-index: 10;
    }
    
    .ipad-home-indicator {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 4px;
      border-radius: 2px;
      background: #333;
      z-index: 10;
    }
    
    .embedded-page {
      width: 100%;
      height: 100%;
      border: none;
      transform-origin: 0 0;
    }
    
    .content-tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .content-tab {
      padding: 10px 20px;
      border-radius: 8px;
      background: white;
      color: #606266;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      transition: all 0.3s;
    }
    
    .content-tab.active {
      background: #409EFF;
      color: white;
      border-color: #409EFF;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
    
    /* 预览标题样式 */
    .preview-title {
      text-align: center;
      margin: 40px 0 20px;
      color: #409EFF;
      font-size: 36px;
      font-weight: 700;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      position: relative;
      display: inline-block;
    }
    
    .preview-title::before,
    .preview-title::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 80px;
      height: 2px;
      background: linear-gradient(90deg, rgba(64, 158, 255, 0), rgba(64, 158, 255, 0.5), rgba(64, 158, 255, 0));
      transform: translateY(-50%);
    }
    
    .preview-title::before {
      left: -100px;
    }
    
    .preview-title::after {
      right: -100px;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .page-container {
        gap: 40px;
      }
      
      .page-title {
        font-size: 24px;
      }
      
      .preview-title {
        font-size: 28px;
      }
      
      .preview-title::before,
      .preview-title::after {
        width: 40px;
      }
      
      .preview-title::before {
        left: -50px;
      }
      
      .preview-title::after {
        right: -50px;
      }
    }
  </style>
</head>
<body>
  <div class="page-container">
    <div class="preview-title-container" style="text-align: center;">
      <h1 class="preview-title">轮滑过桩比赛系统 iPad适配</h1>
      <p class="page-subtitle">适配iPad Air 5 (1180 x 820), 基于Vue 3与Element Plus</p>
    </div>
    
    <!-- 个人赛页面预览 -->
    <div class="page-section" id="personal-race-preview">
      <h2 class="page-title">个人赛页面</h2>
      
      <div class="content-tabs">
        <div class="content-tab active" onclick="switchTab('personal-race', this)">预览效果</div>
        <div class="content-tab" onclick="window.open('personal-race.html', '_blank')">单独查看</div>
      </div>
      
      <div class="ipad-frame">
        <div class="ipad-inner">
          <div class="ipad-camera"></div>
          <div class="ipad-screen">
            <iframe src="personal-race.html" class="embedded-page"></iframe>
          </div>
          <div class="ipad-home-indicator"></div>
        </div>
      </div>
    </div>
    
    <!-- 视频回放页面预览 -->
    <div class="page-section" id="video-playback-preview">
      <h2 class="page-title">视频回放页面</h2>
      
      <div class="content-tabs">
        <div class="content-tab active" onclick="switchTab('video-playback', this)">预览效果</div>
        <div class="content-tab" onclick="window.open('video-playback.html', '_blank')">单独查看</div>
      </div>
      
      <div class="ipad-frame">
        <div class="ipad-inner">
          <div class="ipad-camera"></div>
          <div class="ipad-screen">
            <iframe src="video-playback.html" class="embedded-page"></iframe>
          </div>
          <div class="ipad-home-indicator"></div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    function switchTab(pageId, element) {
      // 获取所有同级的tab并移除active类
      const tabs = element.parentNode.querySelectorAll('.content-tab');
      tabs.forEach(tab => tab.classList.remove('active'));
      
      // 给当前点击的tab添加active类
      element.classList.add('active');
    }
  </script>
</body>
</html> 